@import "~sass/global";

.tab {
  background: #fff;
  padding-bottom: 40px;
}

.topCtrl {
  margin: 20px;
}

.qDual {
  position: relative;
}

.querySection,
.submitSection {
  margin: 20px;
}

.vpoint {
  @extend .flex;
  margin-right: 8px;
  align-items: center;
}
.boxCharts {
  margin: 20px;
  @extend .clearfix;
}

.chart {
  float: left;
  margin-right: 2%;
  margin-bottom: 20px;
}

[data-grid="1"] {
  .chart {
    width: 100%;
    margin-right: 0;
  }
}

[data-grid="2"] {
  .chart {
    width: 49%;
    &:nth-child(2n+2) {
      margin-right: 0;
    }
  }
}

[data-grid="3"] {
  .chart {
    width: 32%;
    &:nth-child(3n+3) {
      margin-right: 0;
    }
  }
}

[data-grid="4"] {
  .chart {
    width: 23.5%;
    &:nth-child(4n+4) {
      margin-right: 0;
    }
  }
}

.pager {
  clear: both;
  margin: 40px 0;
}

.pageSum {
  margin: 20px;
}

.chartGrid {
  svg {
    fill: $colorGrayLight;
    cursor: pointer;
    margin-left: 4px;
    &:hover {
      fill: $colorPrimaryLight;
    }
  }
}


.picker, .sampling {
  margin-left: 4px;
}

@for $i from 1 through 4 {
  [data-grid="#{$i}"] {
    svg[data-grid="#{$i}"] {
      fill: $colorPrimaryLight;
    }
  }
}
